<template>
    <div class="container">
        <headMenu />
        <a-card class="general-card" title="查询">
            <!--  查询   -->
            <a-row>
                <a-col :flex="1">
                    <a-form :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 18 }" label-align="left">


                                                            <a-col :span="9">
                                    <a-form-item field="number" label="文章标题">
                                        <a-input placeholder="文章标题" v-model="pageData.postName" />
                                    </a-form-item>
                                </a-col>
                                                </a-form>
                </a-col>

                <a-col :flex="'86px'" style="text-align: right; position: relative; right: 200px">
                    <a-space direction="vertical" :size="18">
                        <a-button type="primary" @click="search">
                            <template #icon>
                                <icon-search />
                            </template>
                            {{ $t('searchTable.form.search') }}
                        </a-button>
                        <a-button @click="reset">
                            <template #icon>
                                <icon-refresh />
                            </template>
                            {{ $t('searchTable.form.reset') }}
                        </a-button>
                    </a-space>
                </a-col>
            </a-row>
            <a-row style="margin-bottom: 16px">
                <a-col :span="16">
                    <a-space>
                        <a-button type="primary" @click="updateAndAdd(undefined)">
                            <template #icon>
                                <icon-plus />
                            </template>
                            {{ $t('searchTable.operation.create') }}
                        </a-button>
                    </a-space>
                </a-col>
            </a-row>
            <!--  渲染数据  -->
            <a-spin :loading="loading" tip="This may take a while..." style="width: 100%">
                <a-table row-key="urId" :bordered="false" :data="data" @selection-change="selectionChange"
                         style="margin-top: 30px" :pagination="false" :hoverable="true">
                    <template #columns>

                                                    <a-table-column data-index="postId" title="">
                            </a-table-column>
                                                    <a-table-column data-index="postName" title="文章标题">
                            </a-table-column>
                                                    <a-table-column data-index="postContent" title="文章内容">
                            </a-table-column>
                                                <a-table-column title="修改">
                            <template #cell="{ record }">
                                <a-button @click="updateAndAdd(record.postId)" type="outline">编辑</a-button>
                            </template>
                        </a-table-column>

                        <a-table-column title="删除">
                            <template #cell="{ record }">
                                <a-popconfirm @ok="submitDelete(record.postId)" content="Are you sure you want to delete?">
                                    <a-button>
                                        <template #icon>
                                            <icon-delete />
                                        </template>
                                    </a-button>
                                </a-popconfirm>
                            </template>
                        </a-table-column>
                    </template>
                </a-table>
                <a-modal :visible="ediVisible" @ok="handleSubmit" @cancel="handleCancel" width="500">
                    <template #title>{{ form.postId ? '编辑' : '添加' }}</template>
                    <div>
                        <a-form :model="form" :style="{ width: '100%' }">
                                                            <a-table-column data-index="postName" title="文章标题">
                                </a-table-column>

                                <a-form-item field="postName" label="文章标题">
                                    <a-input  v-model="form.postName" placeholder="请输入postName" />
                                </a-form-item>
                                                            <a-table-column data-index="postContent" title="文章内容">
                                </a-table-column>

                                <a-form-item field="postContent" label="文章内容">
                                    <a-input  v-model="form.postContent" placeholder="请输入postContent" />
                                </a-form-item>
                                                    </a-form>
                    </div>
                </a-modal>
                <!--  分页  -->
                <a-pagination :total="pageData.totalCount" show-jumper show-page-size show-total show-current
                              :current="pageData.page" :page-size="pageData.pageSize" :page-size-options="[10, 20, 50, 100]" @change="changePage"
                              @page-size-change="limitChange" />
            </a-spin>
        </a-card>
    </div>
</template>

<script>
    import api from '@/api/tPost/index';
    import headMenu from '@/components/headMenu/headMenu.vue';
    export default {
        components: { headMenu },
        data() {
            return {
                form: {},
                loading: true,
                deleteIds: [],
                ediVisible: false,
                menusName: this.$router.currentRoute.value.meta.locale,
                pageData: {
                    id: '',
                    name: '',
                    createTime: '',
                    endTiem: '',
                    status: '',
                    page: '1',
                    pageSize: 10,
                    totalCount: 0,
                    totalPage: 0,
                },

                data: [],
            };
        },

        methods: {
            /**
             * 取消弹窗
             */
            handleCancel() {
                this.ediVisible = false;
                this.form = {};
            },

            /**
             * 提交判断是添加还是删除
             */
            handleSubmit() {
                if (this.form.postId !== undefined) {
                    this.updateSubmit();
                } else {
                    this.addSumeit();
                }
            },

            /**
             * 提交修改
             */
            updateSubmit() {
                api.updateAdd(this.form).then((res) => {
                    if (res.data.code === 200) {
                        //删除成功
                        this.$notification.success('修改成功!');
                        this.reset();
                        this.form = {};
                    } else {
                        this.$notification.error('修改失败!');
                    }
                });
            },

            /**
             *  添加提交
             */
            addSumeit() {
                api.updateAdd(this.form).then((res) => {
                    if (res.data.code === 200) {
                        //添加成功
                        this.$notification.success('添加成功!');
                        this.reset();
                        this.ediVisible = false;
                        this.form = {};
                    } else {
                        this.$notification.error('添加失败!');
                    }
                });
            },
            /**
             * 新添加的方法
             */
            addInfo() {
                this.ediVisible = true;
            },

            /**
             * 判断当前的修改还是添加
             */
            updateAndAdd(id) {
                if (id !== undefined) {
                    this.updateInfo(id);
                } else {
                    this.addInfo();
                }
            },

            /**
             * 修改前先查询id
             */
            updateInfo(Id) {
                this.loading = true;
                api.info(Id).then((res) => {
                    this.form = res.data.data.data;
                    this.ediVisible = true;
                    this.loading = false;
                });
            },

            /**
             * 删除选中的方法
             */
            subitmDeleteIds() {
                api.delete(this.deleteIds).then((res) => {
                    if (res.data.code === 200) {
                        //删除成功
                        this.$notification.success('删除成功!');
                        this.reset();
                    } else {
                        this.$notification.error('删除失败!');
                    }
                });
            },
            /**
             * 查询数据
             */
            search() {

                //发送请求
                this.getList();
            },
            /**
             *  刷新查询的数据
             */
            reset() {
                this.ediVisible = false;
                this.pageData = {
                    id: '',
                    name: '',
                    createTime: '',
                    endTime: '',
                    status: '',
                    page: '1',
                    pageSize: 10,
                    totalCount: 0,
                    totalPage: 0,
                };
                this.getList();
            },

            /**
             *  选中
             */
            selectionChange(data) {
                this.deleteIds = data;
            },
            /**
             *  选择页码
             */
            changePage(currPage) {
                this.pageData.page = currPage;
                this.getList();
            },
            //选择分页大小
            limitChange(pageSize) {
                this.pageData.pageSize = pageSize;
                this.getList();
            },

            /**
             *  获取当前数据
             */
            getList() {
                this.loading = true;
                api.list(this.pageData).then((res) => {
                    const page = res.data.data;
                    this.data = page.list;
                    this.pageData.page =
                            page.currPage >= page.totalPage ? page.totalPage : page.currPage;
                    this.pageData.pageSize = page.pageSize;
                    this.pageData.totalCount = page.totalCount;
                    this.pageData.totalPage = page.totalPage;
                    this.loading = false;
                });
            },
            /**
             *  删除账号
             */
            submitDelete(id) {
                let data = [];
                data.push(id);
                api.delete(data).then((res) => {
                    if (res.data.code === 200) {
                        //删除成功
                        this.$notification.success('删除成功!');
                        this.reset();
                    } else {
                        this.$notification.error('删除失败!');
                    }
                });
            },
        },
        created() {
            this.getList();
        },
    };
</script>

<style scoped lang="less">
    .container {
        padding: 0 20px 20px 20px;
    }

    :deep(.arco-table-th) {
    &:last-child {
    .arco-table-th-item-title {
        margin-left: 16px;
    }
    }
    }
</style>
